<template>
	<form @submit="formSubmit" @reset="formReset">
    <view class="modifypwd">
      <image class="modifypwd-bg" src="../../static/img/loginbg.png" />
      <scroll-view scroll-y class="modifypwd-inner">
        <view class="input-row">
          <input placeholder-class="text-white" disabled="false" name="userPhone" :value="userPhone" @input="onEnterPhone" type="number" placeholder="请输入手机号" />
        </view>
        <view class="input-row">
          <input placeholder-class="text-white" name="userOldPwd" password="true" placeholder="请输入密码" />
        </view>
        <view class="input-row">
          <input placeholder-class="text-white" name="userNewPwd" password="true" placeholder="请确认新密码" />
        </view>
        <view class="input-row">
          <input placeholder-class="text-white" name="userConfirmPwd" password="true" placeholder="请确认密码" />
        </view>
        <view class="input-row">
          <input placeholder-class="text-white" name="userVerificationCode" type="number" placeholder="请输入验证码" />
          <button class="cu-btn primary round ag-ml20 text-sm" @click="onPhoneVerificationCode" v-if="showSMSCodeButton">获取验证码</button>
          <uni-countdown :show-colon="true" :show-day="false" :second="5" v-if="showCountdown" @timeup="onSmsTimeup"></uni-countdown>
        </view>
        <button form-type="submit" class="cu-btn block primary round ag-mt60">更改</button>
        <button form-type="reset" class="cu-btn block primary round cancel ag-mt20">取消</button>
      </scroll-view >
    </view>
	</form>
</template>
<script>
	import uniCountdown from '@dcloudio/uni-ui/lib/uni-countdown/uni-countdown.vue'
	const graceChecker = require("../../common/graceChecker.js")
	export default {
		components: {
			uniCountdown
		},
		data() {
			return {
				userPhone: '',
				showCountdown: false,
				showSMSCodeButton: true,
			}
		},
		onLoad() {
			this.userPhone = this.UserInfo.mobile;
		},
		methods: {
			onSmsTimeup() {
				this.showCountdown = false;
				this.showSMSCodeButton = !this.showCountdown;
			},
			formReset() {
				uni.redirectTo({
					url: '../login/index'
				});
			},
			onEnterPhone(e) {
				this.userPhone = e.detail.value;
			},
			formSubmit(e) {
				var rule = [{
						name: "userPhone",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "手机号码不能为空"
					},
					{
						name: "userPhone",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请填写正确手机号"
					},
					{
						name: "userOldPwd",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "旧密码不能为空"
					},
					{
						name: "userNewPwd",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "新密码不能为空"
					},
					{
						name: "userConfirmPwd",
						checkType: "same",
						checkRule: "",
						errorMsg: "确认密码和新密码不同"
					},
					{
						name: "userVerificationCode",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "验证码不能为空"
					},
				];
				let formData = e.detail.value;
				rule[4].checkRule = formData.userNewPwd;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					this.onModifyPwdAsync(formData.userPhone, formData.userVerificationCode, 
					formData.userOldPwd, formData.userNewPwd,this.UserInfo.RetId);
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			async onModifyPwdAsync(userPhone, userVerificationCode, userOldPwd, userNewPwd,token) {
				var result = await this.modifyPwdService.modifyPwdAsync(userPhone,
					userVerificationCode,
					userOldPwd,
					userNewPwd,token);
				console.log(result);
				if (result.RetBool == true) {
					uni.navigateTo({
						url: "../login/index",
						success: () => {
							this.subdisabled = false;
						}
					})
				} else {
					uni.showToast({
						title: result.RetMsg,
						icon: "none"
					});
				}

			},
			async onPhoneVerificationCode() {
				this.showCountdown = true;
				this.showSMSCodeButton = !this.showCountdown;
				if (this.userPhone != '') {
					let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
					if (phoneRule.test(this.userPhone)) {
						console.log(this.userPhone);
						var result = await this.modifyPwdService.phoneVerificationCodeAsync(this.userPhone);
						if (result.RetBool == true) {
							uni.showToast({
								title: "验证码已发送",
								icon: "none"
							});
						} else {
							uni.showToast({
								title: "验证码发送失败-" + result.RetMsg,
								icon: "none"
							});
						}
						console.log(result);
					} else {
						uni.showToast({
							title: "请输入正确的手机号",
							icon: "none"
						});
					}
				}
			},
		}
	}
</script>
<style lang="scss">
	.modifypwd {

    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    &-bg{
      left: 0;
      top: 0;
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
    
    &-inner{
      position: absolute;
      padding: 0 80rpx;
      padding-top: 20rpx;
      box-sizing: border-box;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .cu-btn{
      height: 80rpx;
      &.block{
        width: 100%;
      }
      &.cancel{
        background-color: #184e88;
        border-color: #184e88;
      }
    }

		.input-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: white;
			width: 100%;
			margin-top: 40rpx;
			position: relative;

			&__tip {
				font-size: 24rpx;
				position: absolute;
				bottom: -35rpx;
				white-space: nowrap;
				transform: scale(.8);
				transform-origin: left;
				left: 150rpx;
			}

			&__label {
				width: 110rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-right: 40rpx;
				font-size: 28rpx;
			}

			input {
			  height: 80rpx;
				border: 1px solid white;
				font-size: 30rpx;
        flex: 1;
        color: #ffffff;
        border-radius: 40rpx;
        text-align: center;
			}
		}
	}
</style>
